<template>
  <div>
    <!-- css样式的引入 -->

    <!-- 头部 -->
    <!-- <div>
        <span class="iconfont icon-lingdang"></span>
    </div>-->
    <van-nav-bar>
      <van-icon class-prefix="iconfont icon-zuojiantou" name="extra" slot="left" @click="go"/>
      <van-icon class-prefix="iconfont icon-fenxiang" name="extra" slot="right" />
      <van-icon class-prefix="iconfont icon-wujiaoxing" name="extra" slot="right" />
      <van-icon class-prefix="iconfont icon-msg" name="extra" slot="right" :info="comments" />
      <van-icon class-prefix="iconfont icon-dianzan-mian" name="extra" slot="right" :info="popularity" />
    </van-nav-bar>

    <div class="imgarea">
      <div></div>
      <h3>{{title}}</h3>
      <img :src="image" alt height="100%" width="100%" />
    </div>
    <link rel="stylesheet" :href="css" />
    <div v-html="body" class="main"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      //   图片
      image: "",
      //   html代码
      body: "",
      //   html的css
      css: "",
      //   标题
      title: "",
      //   评论数
      comments: "",
      //   点赞数
      popularity: ""
    };
  },
  created() {
    this.getdetail(this.id);
  },
  methods: {
    getdetail(id) {
      this.$axios.get("api/api/4/story-extra/" + id).then(response => {
        this.comments = response.data.comments;
        this.popularity = response.data.popularity;
      });
      this.$axios.get("api/api/4/news/" + id).then(response => {
        this.image = response.data.image;
        this.css = response.data.css[0];
        this.body = response.data.body;
        this.title = response.data.title;
      });
    },
    go(){
         this.$router.go(-1);
    }
  }
};
</script>
<style lang="less">
.iconfont {
  font-family: "iconfont" !important;
  margin-left: .8rem;
  font-size: 0.5rem;
  color: aliceblue;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "iconfont";

  src: url("../../iconfont/iconfont.ttf") format("truetype");
}

.my-icon {
  font-family: "icon-pinglun";
  font-family: "icon-fenxiang";
  font-family: "icon-wujiaoxing";
  font-family: "icon-msg";
  font-family: "icon-lingdang";
  font-family: "icon-zuojiantou";
  font-family: "icon-caidan_o";
  font-family: "icon-caidan_o";
  font-family: "icon-yuandiancaidan";
  font-family: "icon-dianzan-mian";
  font-family: "icon-xiazai";
}
.icon-zuojiantou {
  margin-left: 0.1rem;
}
.icon-dianzan-mian {
  margin-right: 0.6rem;
  .van-info {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    box-sizing: border-box;
    min-width: 0.16rem;
    padding: 0 0.03rem;
    color: #fff;
    font-weight:normal;
    font-size: 0.3rem;
    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
    line-height: 14px;
    text-align: center;
    background-color: #00a2eb;
    border: 0px solid #fff;
    border-radius: 16px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
}
.icon-msg{
    .van-info {
    position: absolute;
    top: 0.3rem;
    right: 1.7rem;
    box-sizing: border-box;
    min-width: 0.16rem;
    padding: 0 0.03rem;
    color: #fff;
    font-weight:normal;
    font-size: 0.3rem;
    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
    line-height: 14px;
    text-align: center;
    background-color: #00a2eb;
    border: 0px solid #fff;
    border-radius: 16px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
}

.my-icon-extra::before {
  content: "\e60d";
  content: "\e60d";
  content: "\e60e";
  content: "\e676";
  content: "\e61d";
  content: "\e8c0";
  content: "\e79b";
  content: "\eb71";
  content: "\e6a9";
  content: "\e632";
  content: "\e635";
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 1rem;
  background-color: #00a2eb;
  .van-nav-bar__left,
  .van-nav-bar__right {
    bottom: 50%;
    transform: translateY(50%);
  }
  .van-icon {
    font-size: 0.4rem;
    color: aliceblue;
    top: 50%;
  }
}
.imgarea {
  position: relative;
  height: 4rem;
  margin-top: 1rem;
  div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)
    );
  }

  h3 {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 1rem;
    padding: 0 50px 50px;
    color: white;
    font: 0.3rem/0.5rem "楷体";
    letter-spacing: 0.02rem;
  }
}
</style>